<template>
  <div id="x6-container2" style="min-height: 500px"></div>
</template>
<script setup>
import { onMounted } from "vue";
import { Graph } from "@antv/x6";

onMounted(() => {
  const graph = new Graph({
    container: document.getElementById("x6-container2"),
    grid: true,
  });

  // row 1
  // -----
  graph.addNode({
    x: 40,
    y: 40,
    width: 120,
    height: 60,
    label: "rect",
  });

  graph.addNode({
    x: 200,
    y: 40,
    width: 120,
    height: 60,
    label: "rect",
    attrs: {
      body: {
        fill: "#efdbff",
        stroke: "#9254de",
      },
    },
  });

  graph.addNode({
    x: 360,
    y: 40,
    width: 120,
    height: 60,
    label: "rect",
    attrs: {
      body: {
        stroke: "#237804",
        fill: "#73d13d",
        rx: 10,
        ry: 10,
      },
    },
  });

  graph.addNode({
    x: 520,
    y: 40,
    width: 60,
    height: 60,
    label: "rect",
    attrs: {
      body: {
        stroke: "#ffa940",
        fill: "#ffd591",
        rx: 10,
        ry: 10,
      },
    },
  });

  // row 2
  // -----

  graph.addNode({
    x: 40,
    y: 140,
    width: 120,
    height: 60,
    label: "rect",
    attrs: {
      label: {
        refX: 8,
        refY: 8,
        textAnchor: "start",
        textVerticalAnchor: "top",
      },
    },
  });

  graph.addNode({
    x: 200,
    y: 140,
    width: 120,
    height: 60,
    label: "rect",
    attrs: {
      body: {
        fill: "#efdbff",
        stroke: "#9254de",
      },
      label: {
        refX: 8,
        refY: 0.5,
        textAnchor: "start",
        textVerticalAnchor: "middle",
      },
    },
  });

  graph.addNode({
    x: 360,
    y: 140,
    width: 120,
    height: 60,
    label: "rect",
    attrs: {
      body: {
        stroke: "#237804",
        fill: "#73d13d",
        rx: 10,
        ry: 10,
      },
      label: {
        refX: 8,
        refY: "100%",
        refY2: -8,
        textAnchor: "start",
        textVerticalAnchor: "bottom",
      },
    },
  });

  graph.addNode({
    x: 520,
    y: 140,
    width: 60,
    height: 60,
    label: "rect",
    attrs: {
      body: {
        stroke: "#ffa940",
        fill: "#ffd591",
        rx: 10,
        ry: 10,
      },
      label: {
        refX: 0.5,
        refY: -4,
        textAnchor: "middle",
        textVerticalAnchor: "bottom",
      },
    },
  });

  // row 3
  // -----

  graph.addNode({
    x: 40,
    y: 240,
    width: 120,
    height: 60,
    label: "rect",
    attrs: {
      label: {
        refX: 0.5,
        refY: 8,
        textAnchor: "middle",
        textVerticalAnchor: "top",
      },
    },
  });

  graph.addNode({
    x: 200,
    y: 240,
    width: 120,
    height: 60,
    label: "rect",
    attrs: {
      body: {
        fill: "#efdbff",
        stroke: "#9254de",
      },
      label: {
        refX: 0.5,
        refY: 0.5,
        textAnchor: "middle",
        textVerticalAnchor: "middle",
      },
    },
  });

  graph.addNode({
    x: 360,
    y: 240,
    width: 120,
    height: 60,
    label: "rect",
    attrs: {
      body: {
        stroke: "#237804",
        fill: "#73d13d",
        rx: 10,
        ry: 10,
      },
      label: {
        refX: 0.5,
        refY: "100%",
        refY2: -8,
        textAnchor: "middle",
        textVerticalAnchor: "bottom",
      },
    },
  });

  graph.addNode({
    x: 520,
    y: 240,
    width: 60,
    height: 60,
    label: "rect",
    attrs: {
      body: {
        stroke: "#ffa940",
        fill: "#ffd591",
        rx: 10,
        ry: 10,
      },
      label: {
        refX: "100%",
        refX2: 4,
        refY: 0.5,
        textAnchor: "start",
        textVerticalAnchor: "middle",
      },
    },
  });

  // row 4
  // -----

  graph.addNode({
    x: 40,
    y: 340,
    width: 120,
    height: 60,
    label: "rect",
    attrs: {
      label: {
        refX: "100%",
        refX2: -8,
        refY: 8,
        textAnchor: "end",
        textVerticalAnchor: "top",
      },
    },
  });

  graph.addNode({
    x: 200,
    y: 340,
    width: 120,
    height: 60,
    label: "rect",
    attrs: {
      body: {
        fill: "#efdbff",
        stroke: "#9254de",
      },
      label: {
        refX: "100%",
        refX2: -8,
        refY: 0.5,
        textAnchor: "end",
        textVerticalAnchor: "middle",
      },
    },
  });

  graph.addNode({
    x: 360,
    y: 340,
    width: 120,
    height: 60,
    label: "rect",
    attrs: {
      body: {
        stroke: "#237804",
        fill: "#73d13d",
        rx: 10,
        ry: 10,
      },
      label: {
        refX: "100%",
        refX2: -8,
        refY: "100%",
        refY2: -8,
        textAnchor: "end",
        textVerticalAnchor: "bottom",
      },
    },
  });

  graph.addNode({
    x: 520,
    y: 340,
    width: 60,
    height: 60,
    label: "rect",
    attrs: {
      body: {
        stroke: "#ffa940",
        fill: "#ffd591",
        rx: 10,
        ry: 10,
      },
      label: {
        refX: 0.5,
        refY: "100%",
        refY2: 4,
        textAnchor: "middle",
        textVerticalAnchor: "top",
      },
    },
  });
});
</script>
